<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <hl v-html="title">
            </h1>
            <p v-text="poem"></p>
            <button v-on:click="togglePoem">显示/隐藏诗词</button>
    </div>
    <script>
        constcomApp = Vue.createApp({
            data() {
                return {
                    title: "<span style='color:red;'>静夜思</span>",
                    poem: "床前明月光,疑是地上霜。",
                    showPoem: false,
                }
            },
            methods: {
                togglePoem() {
                    this.showPoem = !this.showPoem;
                    if (this.showPoem) {
                        this.poem += "举头望明月,低头思故乡。";
                    } else {
                        this.poem = "床前明月光,疑是地上霜。";
                    }
                },
            },
        }).mount(" #app");
    </script>
</body>

</html>
